<template>
  <div class="recommend-container">

    <scroller :on-refresh="refresh" :on-infinite="infinite" ref="boxScroll">

      <div class="topbg">
        <img src="@/assets/images/recommend/img_like_banner.png" alt="">
      </div>

      <!-- 推荐图书列表 -->
      <div class="bookbox" v-for="(item, index) in list" :key="index" @click="goBook(item)">
        <div class="bookinfo">
          <h1>
            <a-icon class="book-icon" type="question-circle" @click.stop="openReason(item)" />
            <span>{{ item.title }}</span>
          </h1>
          <div class="info">
            <p>著者：{{ item.author }}</p>
            <p>ISBN：{{ item.isbn }}</p>
            <p>出版社：{{ item.publisher }}</p>
          </div>
        </div>
      </div>

      <Empty v-if="list.length === 0" title="" />

    </scroller>

    <div class="lay-btn" @click="goSubscribe">订阅</div>

    <a-modal
      title="推荐缘由"
      :visible="visible"
      width="76%"
      centered
      :footer="null"
      :maskClosable="true"
      @cancel="visible = false"
    >
      <p>{{ reason || '-' }}</p>
    </a-modal>

  </div>
</template>
<script>
import Empty from '@/components/empty'
import { dataApi } from '@/api/api'
export default {
  name: 'Recommend',
  components: {
    Empty
  },
  data () {
    return {
      loading: false,
      list: [],
      page: {
        size: 10,
        num: 1
      },
      visible: false,
      reason: ''
    }
  },
  mounted () {
  },
  methods: {
    infinite (done) {
      this.getList(done)
    },
    refresh (done) {
      this.list = []
      this.getList(done, 'refresh')
    },
    getList (done) {
      this.loading = true
      const params = {
        size: this.page.size
      }
      dataApi.recommendByReader(params)
        .then(res => {
          if (res.data.code === 200) {
            const resData = res.data.data || []
            this.list = this.list.concat(resData)
            if (resData.length === 0) {
              this.$refs.boxScroll.finishInfinite(true)
            } else {
              done()
            }
          } else {
            this.$refs.boxScroll.finishInfinite(true)
            this.$message.error(res.data.message)
          }
        })
        .catch(() => {
          this.$refs.boxScroll.finishInfinite(true)
        })
        .finally(() => {
          this.loading = false
        })
    },
    goBook (e) {
      this.$router.push({
        path: '/recommend/book',
        query: {
          ...e
        }
      })
    },
    goSubscribe () {
      this.$router.push({
        path: '/subscribe'
      })
    },
    errorImg (event) {
      event.currentTarget.src = require('@/assets/images/recommend/book-kong.png')
    },
    openReason (e) {
      this.visible = true
      this.reason = e.reason
    }
  }
}
</script>
<style lang="scss" scoped>
.topbg {
  font-size: 0;
  padding-bottom: 0.26rem;
  img {
    width: 100%;
  }
}
.bookbox {
  position: relative;
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  .tip {
    position: absolute;
    width: .88rem;
    bottom: 0;
    right: 0;
  }
}
.bookinfo {
  flex: 1;
  padding-left: .26rem;
  h1 {
    font-size: .3rem;
    font-weight: normal;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: .9rem;
    margin-bottom: 0.1rem;
    .book-icon {
      color: #faad14;
      margin-right: 6px;
    }
  }
  .info {
    font-size: .24rem;
    color: #666666;
  }
}
.lay-btn {
  width: 1rem;
  height: 1rem;
  background: radial-gradient(#eb9747, #f1d8b5);
  box-shadow: 0 0 10px #f4dfbd;
  border-radius: 50%;
  color: #fff;
  position: fixed;
  right: 0.3rem;
  bottom: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
